<template>
  <div style="background-color: white">
    <div>
      <span style="font-size: 20">新产品</span>
      <span>{{ form.materialnumber }}</span>
      <br />
      <br />
      <span style="margin-right: 10px;">创建人:  依旧 </span><span style="margin-right: 10px;"> 创建时间：{{ form.creationTime }}</span
      ><span style="margin-right: 10px;">更新人:依旧 </span><span style="margin-right: 10px;">更新时间：2023-12-12</span>
      <br />
      <br />
      <br />
    </div>
    <div>
      <el-button>编辑</el-button>
      <el-button>删除</el-button>
      <el-button>启用</el-button>
      <el-button>禁用</el-button>
      <el-button>打印</el-button>
    </div>
    <br />
    <div>
      <el-form :model="form.value" label-width="120px">
        <el-row>
          <el-col :span="12"
            ><div class="grid-content ep-bg-purple">
              <el-form-item label="产品编号">
                <!-- <el-input v-model="form.productid"></el-input> -->
                <span>{{ form.materialnumber }}</span>
              </el-form-item>
            </div></el-col
          >
          <el-col :span="12"
            ><div class="grid-content ep-bg-purple-light">
              <el-form-item label="产品名称">
                <span>{{ form.name }}</span>
                <!-- <el-input v-model="form.productname"></el-input> -->
              </el-form-item>
            </div></el-col
          >
        </el-row>
        <el-row>
          <el-col :span="12"
            ><div class="grid-content ep-bg-purple">
              <el-form-item label="规格型号">
                <span>{{ form.specificationsversion }}</span>
                <!-- <el-input v-model="form.specification"></el-input> -->
              </el-form-item>
            </div></el-col
          >
          <el-col :span="12"
            ><div class="grid-content ep-bg-purple-light">
              <el-form-item label="单位">
                <span>{{ form.unit }}</span>
                <!-- <el-input v-model="form.units"></el-input> -->
              </el-form-item>
            </div></el-col
          >
        </el-row>
        <el-row>
          <el-col :span="12"
            ><div class="grid-content ep-bg-purple">
              <el-form-item label="产品类型">
                <span>{{ form.materialtype }}</span>
                <!-- <el-input v-model="form.producttype"></el-input> -->
              </el-form-item>
            </div></el-col
          >
          <el-col :span="12"
            ><div class="grid-content ep-bg-purple-light">
              <el-form-item label="产品属性">
                <span>{{ form.materialProperty }}</span>
                <!-- <el-input v-model="form.productproperty"></el-input> -->
              </el-form-item>
            </div></el-col
          >
        </el-row>
        <el-row>
          <el-col :span="12"
            ><div class="grid-content ep-bg-purple">
              <el-form-item label="产品分类">
                <span>{{ form.materialclassify }}</span>
                <!-- <el-input v-model="form.classname"></el-input> -->
              </el-form-item>
            </div></el-col
          >
          <el-col :span="12"
            ><div class="grid-content ep-bg-purple-light">
              <el-form-item label="状态">
                <span>{{ form.state }}</span>
                <!-- <el-input v-model="form.state"></el-input> -->
              </el-form-item>
            </div></el-col
          >
        </el-row>
        <el-row>
          <el-col :span="12"
            ><div class="grid-content ep-bg-purple">
              <el-form-item label="有效期">
                <span>{{ form.periodofvalidity }}</span>
                <!-- <el-input v-model="form.periodofvalidity"></el-input> -->
              </el-form-item>
            </div></el-col
          >
          <el-col :span="12"
            ><div class="grid-content ep-bg-purple-light">
              <el-form-item label="报警天数">
                <span>{{ form.alarmdays }}</span>
                <!-- <el-input v-model="form.numberday"></el-input> -->
              </el-form-item>
            </div></el-col
          >
        </el-row>
        <el-row>
          <el-col :span="12"
            ><div class="grid-content ep-bg-purple">
              <el-form-item label="库存上限">
                <span>{{ form.inventoryceiling }}</span>
                <!-- <el-input v-model="form.inventoryceiling"></el-input> -->
              </el-form-item>
            </div></el-col
          >
          <el-col :span="12"
            ><div class="grid-content ep-bg-purple-light">
              <el-form-item label="库存下限">
                <span>{{ form.stockfloor }}</span>
                <!-- <el-input v-model="form.stockfloor"></el-input> -->
              </el-form-item>
            </div></el-col
          >
        </el-row>
        <el-row>
          <el-col :span="12"
            ><div class="grid-content ep-bg-purple">
              <el-form-item label="采购价格">
                <span>{{ form.purchaseprice }}</span>
                <!-- <el-input v-model="form.purchaseprice"></el-input> -->
              </el-form-item>
            </div></el-col
          >
        </el-row>
        <el-form-item label="备注">
          <span>{{ form.remark }}</span>
          <!-- <el-input v-model="form.remark"></el-input> -->
        </el-form-item>
      </el-form>
    </div>
    <div>
      <p>图片</p>
      <el-image
        v-for="(a, index) in images"
        style="margin-right: 20px; width: 100px; height: 100px"
        :key="index"
        :src="a.filepath"
      ></el-image>
      <p>附件</p>
      <p v-for="(a, index) in attachment" :key="index">{{ a.filepath }}</p>
    </div>
  </div>
</template>
  <script>
import { useRoute } from "vue-router";
import { ref, reactive } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { MaterialDetails } from "../../api/Material";
export default {
  setup() {
    
    const form = ref({
      materialnumber: "",
      name: "",
      specificationsversion: "",
      unit: "",
      materialtype: "",
      materialProperty: "",
      materialclassify: null,
      state: "",
      periodofvalidity: "",
      periodofvalidityunit: "",
      alarmdays: null,
      inventoryceiling: null,
      stockfloor: null,
      purchaseprice: null,
      remark: "",
    });
    const route = useRoute();
    const selectId = ref("");
    const Data = reactive({});
    const images = ref([]);
    const attachment = ref([]);
    const getData = () => {
      selectId.value = route.query.id;
      MaterialDetails(selectId.value).then((res) => {
        form.value = res.result;
        res.result.imgChildren.forEach((element) => {
          images.value.push({
            filepath:
              "http://127.0.0.1:9000/auditattachments/" + element.filepath,
          });
        });
        res.result.accessoryChildren.forEach((element) => {
          attachment.value.push({
            filepath: element.filepath,
          });
        });
      });
    };
    getData();
    return {
      form,
      route,
      selectId,
      Data,
      images,
      attachment,
      getData,
    };
  },
};
</script>
  